<!DOCTYPE html>
<html>
<head lang="en">
    <meta http-equiv="content-type" content="text/html;charset=utf-8" charset="UTF-8">
    <title>用户注册</title>
    <link href="font/css/font-awesome.css" rel="stylesheet" type="text/css">
    <link href="css/style.css" rel="stylesheet" type="text/css">



    <style type="text/css">

        body{
            background-color: #EEE;
        }

        #main-box{
            width:1140px;
            margin:30px auto;
            box-shadow: 0 3px 3px 0 #ccc;
            -moz-box-shadow: 0 3px 3px 0 #ccc;
            -webkit-box-shadow: 0 3px 3px 0 #ccc;
            background-color: #ffffff;
            border-top:4px solid #A12F2F;
            min-height: 700px;
            position:relative;
        }
        /*#main-box{*/
            /*position:absolute;*/
            /*top:70px;*/
            /*bottom: 0;*/
            /*width:100%;*/
            /*min-height: 800px;*/
        /*}*/

        .main-form{
            position: absolute;
            top:45%;
            left:50%;
            transform:translate(-50%,-50%);
            width:500px;
        }

        .main-form-title{
            color:  #A12F2F;
            font-size: 30px;
            text-align: center;
            padding-left: 40px;
        }

        #main-form{
            margin-top:30px;
        }

        #main-form .input-item .selected i{
            color: #A12F2F;
        }

        #main-form .input-item .selected{
            border:1px solid #A12F2F;

        }


        .input-item{
            width:100%;
            height:40px;
            overflow: hidden;
            margin:25px 0;
        }

        .input-item .input-label{
            float: left;
            width:100px;
            height:40px;
            line-height: 40px;
            text-align: center;
            color:#444;
        }

        .input-item .input-box{
            float: left;
            width:328px;
            height:38px;
            line-height: 38px;
            border:1px solid #ccc;
            border-radius: 5px;
            padding:0 10px;
            position: relative;
            background-color: #ffffff;
        }


        .input-item .input-box > i{
            position: absolute;
            top:11px;
            left:10px;
            color: #ccc;
        }

        .input-item .input-box > input{
            width: 100%;
            height:38px;
            line-height: 38px;
            font-size: 16px;
            border: none;
            outline: none;
            float: left;
            color:#666;
        }

        .input-item .input-box-verifi{
            width:188px;
        }

        #verifi-code{
            width:100px;
            height:40px;
            float: left;
            overflow: hidden;
        }

        #submit-btn{
            display: block;
            width:350px;
            height:40px;
            border: none;
            border-radius: 5px;
            background-color: #A12F2F;
            color:#ffffff;
            font-size: 16px;
        }


    </style>

    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>

    <script type="text/javascript" src="js/app/header.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            $("#main-form .input-icon-box").on("keyup click",'input',function(e){
                var i = $(e.target).prev("i");
                if(i){
                    var inputText = $(e.target).val();
                    if(inputText.length > 0){
                        i.hide();
                    }else{
                        i.show();
                    }
                }
            });

            $("#main-form input:text").focus(function(e){
                $(this).parent().addClass("selected");
            });

            $("#main-form input:text").blur(function(e){
                $(this).parent().removeClass("selected");
            });

        });
    </script>

    <!--<script src="https://use.fontawesome.com/1829b45e75.js"></script>-->

</head>
<body>

<div class="top-navigation">
    <div class="nav-content">
        <a class="logo" href="#">
            <img src="img/logo.png">
        </a>
        <div class="nav-options">
            <div id="user-info">
                <a class="link-info" id="user-link" href="#"> <i class="fa fa-user" aria-hidden="true"></i>郝晓田<i class="direction fa fa-caret-down" aria-hidden="true"></i></a>
                <div class="user-model-box">
                    <div  class="user-model">
                        <div class="line header">
                            高级会员
                        </div>
                        <div class="line">
                            <span>邮箱：</span> student@abc.com
                        </div>

                        <div class="line">
                            <span>单位：</span> 中国音乐学院
                        </div>

                        <div class="line">
                            <span>电话：</span> 1234567890
                        </div>

                        <div class="line line-func">
                            <a class="link-change-info" href="#">修改信息</a>
                            <a class="link-logout" href="#">退出登陆</a>
                        </div>
                    </div>

                </div>
            </div>
            <a class="link-register" href="#"> <i class="fa fa-user" aria-hidden="true"></i>立即注册</a>
            <div id="login-box">
                <a id="login-link" href="#">登录
                    <i class="fa fa-caret-down" aria-hidden="true"></i>
                </a>
                <div class="login-model-box">
                    <div  class="login-model">
                        <div class="line header">
                            <i class="fa fa-user" aria-hidden="true"></i>
                            会员登录
                        </div>
                        <form>
                            <div class="line input">
                                <input type="text" placeholder="用户名">
                            </div>

                            <div class="line input">
                                <input type="password" placeholder="密码">
                            </div>

                            <div class="line func">
                                <div>
                                    <input id="remember-me" type="checkbox">
                                    <label for="remember-me">记住我</label>
                                </div>

                                <a href="#">忘记密码？</a>
                            </div>

                            <div class="line btn-login-reg">
                                <input class="btn-login" type="submit" value="登录">
                                <a class="btn-register" href="regist.html">注册</a>
                            </div>

                        </form>
                    </div>

                </div>

            </div>
            <a href="#">关于我们</a>
            <a href="#" class="language">中文</a>
            <a href="#" class="language">EN</a>
        </div>
    </div>
</div>

<div class="main-box" id="main-box">
    <div class="main-form">
        <div class="main-form-title">
            修改信息
        </div>

        <form id="main-form" action="#" method="get">

            <div class="input-item">
                <span class="input-label">姓名</span>
                <div class="input-box input-icon-box">
                    <i class="fa fa-user" aria-hidden="true"></i>
                    <input type="text"/>
                </div>
            </div>

            <div class="input-item">
                <span class="input-label">单位</span>
                <div class="input-box input-icon-box">
                    <i class="fa fa-home" aria-hidden="true"></i>
                    <input type="text"/>
                </div>
            </div>

            <div class="input-item">
                <span class="input-label">邮箱</span>
                <div class="input-box input-icon-box">
                    <i class="fa fa-envelope-o" aria-hidden="true"></i>
                    <input type="text"/>
                </div>
            </div>

            <div class="input-item">
                <span class="input-label">旧密码</span>
                <div class="input-box input-icon-box">
                    <i class="fa fa-lock" aria-hidden="true"></i>
                    <input type="text"/>
                </div>
            </div>

            <div class="input-item">
                <span class="input-label">密码</span>
                <div class="input-box input-icon-box">
                    <i class="fa fa-lock" aria-hidden="true"></i>
                    <input type="text"/>
                </div>
            </div>

            <div class="input-item">
                <span class="input-label">确认密码</span>
                <div class="input-box input-icon-box">
                    <i class="fa fa-lock" aria-hidden="true"></i>
                    <input type="text"/>
                </div>
            </div>

            <div class="input-item">
                <span class="input-label">验证码</span>
                <div class="input-box input-box-verifi">
                    <input id="verifi" type="text"/>
                </div>
                <img id="verifi-code" src="img/verification.jpg">
            </div>

            <div class="input-item">
                <span class="input-label"></span>
                <input id="submit-btn" type="submit" value="修改">
            </div>

        </form>
    </div>

</div>
</body>
</html>